<template>
  <div class="czrz">
    <myTableSearch 
      ref="myTableSearchRef" 
      :isOperate="false" 
      :operateWidth="300" 
      :titleName="$route.meta.title"
      :queryFn="getList"
      :formData="formData" 
      :tableLabel="tableLabel"
      @recombinationData="recombinationData"
    >
      <!-- <template slot="tool">
        <div class="flex flex-x">
          <div class="fillBtn">
            <span>删除数据</span>
            <img src="@/assets/images/icon/delData.png" alt="">
          </div>
          <div class="fillBtn ml-1">
            <span>清空数据</span>
            <img src="@/assets/images/icon/clearData.png" alt="">
          </div>
          <div class="fillBtn ml-1">
            <span>解锁数据</span>
            <img src="@/assets/images/icon/unlockData.png" alt="">
          </div>
          <div class="fillBtn ml-1">
            <span>导出数据</span>
            <img src="@/assets/images/icon/exportData.png" alt="">
          </div>
        </div>
      </template> -->
      <template #type="scope">
        <div class="dlzt" :style="scope.row.type==1?'background: #0fb971;':'color:#FC1212;background: #fc121233;' ">
          <span>{{scope.row.type==1?'成功':'失败'}}</span>
        </div>
      </template>
      <template #responseTime="scope">
        <div class="">
          <span>{{scope.row.responseTime}}毫秒</span>
        </div>
      </template>
    </myTableSearch>

  </div>
</template>

<script>
import {logPage} from '@/api/sys/log.js'
export default {
  data() {
    return {
      formData: [
        {
          label: '系统模块',
          type: 'input',
          key: 'title',
        },
        {
          label: '操作人员',
          type: 'input',
          key: 'userName',
        },
        {
          label: '操作状态',
          type: 'select',
          key: 'type',
          data: [
            {
              dictLabel: '成功',
              dictValue: '1'
            },
            {
              dictLabel: '失败',
              dictValue: '9'
            },
          ]
        },
        {
          label: '操作时间',
          type: 'daterange',
          key: 'createTime',
        },
      ],
      tableLabel: [
        {
          prop: 'title',
          label: '系统模块',
        },
        {
          prop: 'remoteAddr',
          label: 'IP地址',
        },
        {
          prop: 'requestUri',
          label: '路径',
        },
        {
          prop: 'requestMethod',
          label: '请求方式',
        },
        {
          prop: 'responseTime',
          label: '响应时间',
        },
        {
          prop: 'type',
          label: '操作状态',
        },
        {
          prop: 'createTime',
          label: '操作时间',
        },
        {
          prop: 'userName',
          label: '操作人员',
        },
      ],
    }
  },
  mounted() {

  },
  methods: {
    getList(e){
      return logPage(e)
    },
    //格式化搜索字段
    recombinationData(param,callback){
      if(param.createTime && Array.isArray(param.createTime)){
        param['params']={
          createTimeStart:param.createTime[0],
          createTimeEnd:param.createTime[1],
        }
      };
      delete param.createTime;
      param={
        ...param,
      }
      callback({...param})
    },
  },
}
</script>

<style lang="scss" scoped>
.czrz{
  width: 100%;
  height: 100%;
  .dlzt{
    padding: 2px 8px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    color: #ffffff;
  }
}
</style>